<template>
  <view class="my-container">
    <!-- 头像和手机号部分 -->
    <view class="header">
      <image src="/static/head.png"></image>
      <text @click="login">{{ mobile() }}</text>
    </view>
    <!-- 订阅区域 -->
    <view class="order-wrap">
      <view class="content">
        <image src="/static/king.png"></image>
        <text class="desc">开通好玩游戏会员，可立即体验经典小游戏！</text>
        <u-button class="btn" ripple size="mini" shape="circle" @click="order">立即订阅</u-button>
      </view>
    </view>
    <!-- 我的订阅 -->
    <view class="order-tips">
      <text>我的订阅</text>
    </view>
    <!-- cate-list -->
    <view class="cate-list">
      <view class="item" @click="go2List('休闲')">
        <image src="/static/c1.png"></image>
        <text>休闲</text>
      </view>
      <view class="item" @click="go2List('益智')">
        <image src="/static/c2.png"></image>
        <text>益智</text>
      </view>
      <view class="item" @click="go2List('冒险')">
        <image src="/static/c3.png"></image>
        <text>冒险</text>
      </view>
      <view class="item" @click="go2List('策略')">
        <image src="/static/c4.png"></image>
        <text>策略</text>
      </view>
    </view>

    <!-- 功能区域 -->
    <u-cell-group class="func-wrap" :border="false">
      <u-cell-item @click="call">
        <image slot="icon" src="/static/ls.png"></image>
        <text slot="title">客服电话</text>
      </u-cell-item>
      <u-cell-item @click="isLogoutModal = true">
        <image slot="icon" src="/static/logout.png"></image>
        <text slot="title">退出</text>
      </u-cell-item>
      <!-- <u-cell-item>
        <image slot="icon" src="/static/suggest.png"></image>
        <text slot="title">意见反馈</text>
      </u-cell-item> -->
    </u-cell-group>
    <!-- 绑定手机号模态框 -->
    <u-modal class="bind-modal" ref="uModal" v-model="show" title="请输入绑定好玩游戏的手机账号" confirm-text="登录" :mask-close-able="true" :async-close="true" @confirm="confirm">
      <view class="tips-text" v-if="false">
        经检测，您尚未注册账户 马上登陆，可享精彩内容
      </view>
      <u-field label-width="0" type="tel" maxlength="11" label-align="center" placeholder="请输入手机号" v-model="phone"></u-field>
    </u-modal>
    
    <!-- 确认退出 -->
    <u-modal v-model="isLogoutModal" :title="logout" confirm-text="退出" show-cancel-button confirm-color="#A25DFF" @confirm="confirmLogout">
      <view></view>
    </u-modal>
  </view>

</template>

<script>
  import { bindMobile, isCanPlay } from '../../api/index.js'
  
  export default {
    data() {
      return {
        show: false,
        isLogoutModal: false,
        logout: '确定要退出吗？',
        phone: ''
      }
    },
    methods: {
      async go2List(name) {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (!mobile) {
          return this.$u.toast('请先登录')
        }
        const res = await isCanPlay({ mobile })
        if (res.data.result === 'false') {
          this.$u.toast(res.data.message)
        } else {
          if (res.data.data.pid === 98) {
            uni.navigateTo({
              url: '/pages/list/list?type=' + name
            })
          }
        }
      },
      mobile() {
        return uni.getStorageSync('hwyx-mobile') || '请先登录'
      },
      async confirm() {
        if (!this.phone) {
          this.$u.toast('请输入手机号')
          return this.$refs.uModal.clearLoading()
        }
        const reg = /^[1]((33)|(49)|(53)|(70)|(73)|(77)|(80)|(81)|(89)|(99)|(91))[0-9]{8}$/
        if (!reg.test(this.phone)) {
          this.$u.toast('请输入电信手机号')
          return this.$refs.uModal.clearLoading()
        }
        const res = await bindMobile({ mobile: this.phone + '' })
        this.$u.toast('手机号绑定成功')
        this.show = false
        uni.setStorageSync('hwyx-mobile', this.phone)
        this.phone = ''
      },
      login() {
        this.show = true
      },
      confirmLogout() {
        uni.clearStorage()
        this.$u.toast('退出成功')
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home'
          })
        })
      },
      call() {
        uni.makePhoneCall({
          phoneNumber: '4006778819'
        })
      },
      async order() {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (mobile) {
          const res = await isCanPlay({ mobile })
          if (res.data.result === 'false') {
            this.$u.toast(res.data.message)
            return uni.navigateTo({
              url: '/pages/open/open'
            })
          } else {
            if (res.data.data.pid === 98) {
              return this.$u.toast('已订购')
            }
          }
        }
        this.show = true
      }
    }
  }
</script>

<style lang="scss">
  .my-container {
    background-color: #F2F4F5;

    .header {
      height: 248rpx;
      background-color: white;
      padding: 0 40rpx 60rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 126rpx;
        height: 126rpx;
        margin-right: 34rpx;
      }

      text {
        font-size: 30rpx;
        color: #333333;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
      }
    }

    // 订阅区域
    .order-wrap {
      display: flex;
      justify-content: center;
      margin-top: -55rpx;

      .content {
        display: flex;
        align-items: center;
        width: 713rpx;
        height: 110rpx;
        background: linear-gradient(90deg, #404041 0%, #242526 100%);
        border-radius: 40rpx 40rpx 16rpx 16rpx;
        padding: 0 10rpx;

        image {
          width: 34rpx;
          height: 29rpx;
          margin-right: 10rpx;
        }

        .desc {
          font-size: 24rpx;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #F7DFB6;
        }

        .btn {
          background: linear-gradient(90deg, #FFEAC8 0%, #E0B876 100%);
          border: none;
          font-size: 26rpx;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
        }
        
        .u-hairline-border:after {
          border: none;
        }
      }
    }

    // order-tips
    .order-tips {
      width: 702rpx;
      height: 83rpx;
      background-color: white;
      border-radius: 16rpx;
      margin: 30rpx auto;
      line-height: 83rpx;
      padding-left: 20rpx;

      text {
        font-size: 28rpx;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #333333;
      }
    }
    

    // 四个分类
    .cate-list {
      display: flex;
      justify-content: space-around;

      // margin-bottom: 30rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 156rpx;
        height: 180rpx;
        background-color: white;
        border-radius: 8rpx;

        image {
          width: 68rpx;
          height: 68rpx;
          margin-bottom: 25rpx;
        }

        text {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    // 功能区域
    .func-wrap {
      margin-top: 30rpx;
      height: 500rpx;
      background-color: white;

      /deep/.u-cell-item-box {
        border-radius: 16rpx;
      }

      .u-cell {
        // 修改左边icon样式
        .u-flex {
          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 30rpx;
          }
        }

        // 修改title文字样式
        /deep/.u-cell_title {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        // 修改右箭头样式
        /deep/.u-icon {
          color: #000000;
        }
      }
    }

    // 模态框
    /deep/.bind-modal {
      .u-line-1 {
        font-size: 34rpx;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        margin: 30rpx;
      }

      .u-model__content {
        .tips-text {
          padding: 30rpx 120rpx;
          font-size: 28rpx;
          color: #666666;
        }
        .u-field {
          font-size: 34rpx;
          color: #333;
          background-color: #F6F6F6;
          margin: 60rpx 60rpx 30rpx;
          border-radius: 50rpx;
        }
        .u-border-bottom:after {
          border: none;
        }
      }

      .u-model__footer {
        .u-model__footer__button {
          flex: unset;
          background-color: #8FAFFF;
          width: 255rpx;
          height: 77rpx;
          border-radius: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #FFF!important;
          font-size: 33rpx;
          margin: 40rpx auto;
        }
      }
    }
    
    /deep/.u-model__title {
      margin-bottom: 40rpx;
    }
    
    /deep/.u-border-top:after {
      border: none;
    }
  }
</style>
